<template>
	<view class="flex flex-col h-screen">
		<uni-nav-bar title="VIP特权" fixed color="#000" statusBar backgroundColor="transparent" :border="false"
			left-icon="left" @clickLeft="back"></uni-nav-bar>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-30">
					<view class="bg-[length:100%_100%] rounded-lg flex flex-col p-20 mb-30" v-for="e,i in vipList" :key="i"
						:style="{backgroundImage:`url(${e.bg})`}">
						<view class="flex items-center">
							<ImageBoxVue :src="e.title" width="35rpx" height="29rpx"></ImageBoxVue>
							<text :class="[e.lv==5?'text-[#F4E9C0]':'text-[#333333]','text-sm font-bold']">LV.</text>
							<text class="text-[30px] font-bold ml-10" :style="{color:e.lvColor}">{{e.lv}}</text>
						</view>
						<text :class="[e.lv==5?'text-white':'text-[#697379]']">会员等级</text>
						<view class="p-10 mt-10 rounded-lg" :style="{backgroundColor:e.contentBg}">
							<text :class="[e.lv==5?'text-[#AA9A80]':'text-[#697379]']">{{e.content}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	const vipList = [{
		bg: "/static/user/lv_bg1.png",
		title: "/static/icons/title.png",
		lv: 1,
		lvColor: "#329EFF",
		content: "可享受有限被答权，特约专家是平台特别邀请的领域专家至少精通四个以上学科并在同类平台连续半年排名第一，能够给用户提供更加全面的多学科综合解读，并提供可行的改善建议，",
		contentBg: "#EBF7FF",
	}, {
		bg: "/static/user/lv_bg2.png",
		title: "/static/icons/lv2.png",
		lv: 2,
		lvColor: "#D58C2E",
		content: "可享受有限被答权，特约专家是平台特别邀请的领域专家至少精通四个以上学科并在同类平台连续半年排名第一，能够给用户提供更加全面的多学科综合解读，并提供可行的改善建议，",
		contentBg: "#FFFDF0",
	}, {
		bg: "/static/user/lv_bg3.png",
		title: "/static/icons/lv3.png",
		lv: 3,
		lvColor: "#EA4949",
		content: "可享受有限被答权，特约专家是平台特别邀请的领域专家至少精通四个以上学科并在同类平台连续半年排名第一，能够给用户提供更加全面的多学科综合解读，并提供可行的改善建议，",
		contentBg: "#FFF0F0",
	}, {
		bg: "/static/user/lv_bg4.png",
		title: "/static/icons/lv4.png",
		lv: 4,
		lvColor: "#8A53FF",
		content: "可享受有限被答权，特约专家是平台特别邀请的领域专家至少精通四个以上学科并在同类平台连续半年排名第一，能够给用户提供更加全面的多学科综合解读，并提供可行的改善建议，",
		contentBg: "#F0EBFF",
	}, {
		bg: "/static/user/lv_bg5.png",
		title: "/static/icons/lv5.png",
		lv: 5,
		lvColor: "#DBC17F",
		content: "可享受有限被答权，特约专家是平台特别邀请的领域专家至少精通四个以上学科并在同类平台连续半年排名第一，能够给用户提供更加全面的多学科综合解读，并提供可行的改善建议，",
		contentBg: "#343433",
	}]
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style>

</style>